<html ng-app="exampleApp">
<head>
    <title>Filters</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
            .controller("defaultCtrl", function ($scope) {
            
                // ...statements omitted for brevity...             
            });
    </script>
    <script src="customFilters.js"></script>
</head>

<body ng-controller="defaultCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>
                Products
                <span class="label label-primary">{{products.length}}</span>
            </h3>
        </div>
        <div class="panel-body">
            Limit: <select ng-model="limitVal"
                           ng-options="item for item in limitRange"></select>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Category</td>
                        <td>Expiry</td>
                        <td class="text-right">Price</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="p in products | orderBy:[myCustomSorter, '-price'] | limitTo: 5">
                        <td>{{p.name | labelCase }}</td>
                        <td>{{p.category | labelCase:true }}</td>
                        <td>{{p.expiry}}</td>
                        <td class="text-right">{{p.price | currency }}</td>
                    </tr>




                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
